<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            font-size:12px;
            line-height:20px;
        }
        .main{
            width:525px;
            margin-left:auto;
            margin-right:auto;
            }
        .hr_1 {
            font-size: 14px;
            font-weight: bold;
            color: #3275c3;
            height: 35px;
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-bottom-color: #3275c3;
            vertical-align:bottom;
            padding-left:12px;
        }
        .left{
            text-align:right;
            width:80px;
            height:25px;
            padding-right:5px;
            }
            
        .center{
            width:135px;
            }
        .in{
            width:130px;
            height:16px;
            border:solid 1px #79abea;
            }
        
        .red{
            color:#cc0000;
            font-weight:bold;
            }
        
        div{
            color:#F00;
            }    
        </style>

        <script type="text/JavaScript">
            function $(elementId){
          return document.getElementById(elementId).value;
            }
        function divId(elementId){
          return document.getElementById(elementId);
            }
        /*用户名验证*/    
        function checkUser(){
          var user=$("user");
          var userId=divId("user_prompt");
           userId.innerHTML="";    
          var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;    
            if(reg.test(user)==false){
               userId.innerHTML="用户名不正确";
            return false;
              }
              return true;
            }
        /*密码验证*/    
        function checkPwd(){
          var pwd=$("pwd");
          var pwdId=divId("pwd_prompt");
           pwdId.innerHTML="";    
          var reg=/^[a-zA-Z0-9]{4,10}$/;    
            if(reg.test(pwd)==false){
               pwdId.innerHTML="密码不能含有非法字符，长度在4-10之间";
            return false;
              }
              return true;
            }
            
        function checkRepwd(){
          var repwd=$("repwd");
          var pwd=$("pwd");
          var repwdId=divId("repwd_prompt");
           repwdId.innerHTML="";
            if(pwd!=repwd){
               repwdId.innerHTML="两次输入的密码不一致";
            return false;
              }
              return true;
            }
        
        /*验证邮箱*/
        function checkEmail(){
          var email=$("email");
          var email_prompt=divId("email_prompt");
          email_prompt.innerHTML="";
          var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;    
            if(reg.test(email)==false){
              email_prompt.innerHTML="Email格式不正确，例如web@sohu.com";
            return false;
              }
              return true;
        }
        /*验证手机号码*/
        function checkMobile(){
            var mobile=$("mobile");
            var mobileId=divId("mobile_prompt");
            var regMobile=/^1\d{10}$/;
            if(regMobile.test(mobile)==false){
                mobileId.innerHTML="手机号码不正确，请重新输入";
                return false;
                }
                mobileId.innerHTML="";
                return true;
            }
        </script>
        
        <table class="main" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="img/logo3.png" alt="logo" /><img src="images/banner.jpg" alt="banner" /></td>
          </tr>
          <tr>
            <td class="hr_1">新用户注册</td>
          </tr>
          <tr>
            <td style="height:10px;"></td>
          </tr>
          <form action="" method="post" name="myform">
          <tr>
            <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="left">用户名：</td>
            <td class="center"><input id="user" type="text" class="in" onblur="checkUser()" /></td>
            <td><div id="user_prompt">用户名由英文字母和数字组成的4-16位字符，以字母开头</div></td>
          </tr>
          <tr>
            <td class="left">密码：</td>
            <td class="center"><input id="pwd" type="password" class="in"  onblur="checkPwd()"/></td>
            <td><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></td>
          </tr>
          <tr>
            <td class="left">确认密码：</td>
            <td class="center"><input id="repwd" type="password" class="in"  onblur="checkRepwd()"/></td>
            <td><div id="repwd_prompt"></div></td>
          </tr>
           <tr>
            <td class="left">电子邮箱：</td>
            <td class="center"><input id="email" type="text" class="in"  onblur="checkEmail()"/></td>
            <td><div id="email_prompt"></div></td>
          </tr>
            <tr>
            <td class="left">手机号码：</td>
            <td class="center"><input id="mobile" type="text" class="in" onblur="checkMobile()" /></td>
            <td><div id="mobile_prompt"></div></td>
          </tr>
           <tr>
             <td class="left">&nbsp;</td>
             <td class="center"><input type="button" value="提交"></td>
             <td>&nbsp;</td>
           </tr>
        </table>
        </td>
          </tr>
          </form>
        </table>     
        
</body>
</html>